<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件通讯 父传子 通过props</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
     <cpn :cmovies="moives" :cmessage="message"></cpn>
    </div>
   <template id="cpn">
       <div>
           <ul>
               <li v-for="item in cmovies">{{ item }}</li>
           </ul>
           <h2>{{ cmessage }}</h2>
       </div>
   </template>

    <script>
       const cpn = {
           template: '#cpn',
        //    props: ['cmovies', 'cmessage'], 是一个数组
         
            props: {//可以是对象
                //1. 类型限制
                // cmovies: Array,
                // cmessage: String

                //2.提供一些默认值,以及必传值
                cmessage: {
                    type: String,
                    default: '' ,
                    required: true
                },
                cmovies: {
                    type: Array,
                    default: '',
                    required: true
                }
                // //3. 当类型是对象或者数组时，默认值必须是一个函数
                // cmessage: {
                //     type: Array,
                //     default() {
                //         return []
                //     },
                //     required: true
                // }

            },

           data() {
                return {

                }
           },
           methods: {

           }
       }
      
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                moives: ['海王', '海贼王', '西游记']
            },
            components: {
              cpn
            }
        })
    </script>
</body>
</html>